<template>
  <div>
    <el-row class="tac">
  <el-col :span="3">
    <div class="g-subindex">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <router-link to="/email/edit">
        <el-menu-item index="1">
          <span slot="title">写邮件</span>
        </el-menu-item>
      </router-link>
      <router-link :to='{path:"/email/inbox?seen=true"}'>
        <el-menu-item index="2">
           <span slot="title">收邮件</span>
        </el-menu-item>
      </router-link>
      <router-link :to='{path:"/email/inbox?seen=false"}'>
        <el-menu-item index="3">
          <span slot="title">未读邮件</span>
        </el-menu-item>
      </router-link>
      <el-menu-item index="4" disabled>
        <span slot="title">草稿箱</span>
      </el-menu-item>
      <router-link :to='{path:"/email/senderbox"}'>
        <el-menu-item index="5">
          <span slot="title">已发送</span>
        </el-menu-item>
      </router-link>
      <el-menu-item index="6" disabled>
        <span slot="title">已删除</span>
      </el-menu-item>
      <el-menu-item index="7" disabled>
        <span slot="title">垃圾箱</span>
      </el-menu-item>
    </el-menu>
    </div>
    <div style="width: 163px;height: 1px"></div>
  </el-col>
  <el-col :span="16">
    <div class="g-content">
      <router-view></router-view>
    </div>
  </el-col>
</el-row>
  </div>
</template>

<script>
export default {
  name: 'EmailIndex',
  data () {
    return {
    }
  },
  methods: {
      handleOpen(key, keyPath) {

      },
      handleClose(key, keyPath) {

      }
   }
}
</script>

<style>
.email-inbox-item{
  background-color: white;
  border-radius: 3px;
  width: 700px;
  padding: 20px 20px;
  font-size: 13px;
  color: #666;
  position: relative;
  border-bottom: 1px solid #ccc
}
.email-header-name{
  width: 140px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
    margin-right: 20px;
    margin-left: 14px;
}
.email-header-summary{
  width: 450px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: inline-block;
  display: inline-block;
}
.summary-content{
  color: #aaa;
}
.email-inbox-oper{
  display: inline-block;
  position: absolute;
  right: 20px;
}
.email-inbox-oper i{
  padding: 3px;
}
.email-inbox-oper i:hover{
  background-color: #ccc;
  border-radius: 50%;
}

.email-inbox-main{
  border-top:1px #ccc solid;
  margin-top: 10px;
}
.email-main-content{
  font-size: 14px;
  margin-top: 30px !important;
}
.email-inbox-main>div{
  margin: 12px 5px;
}
.email-inbox-main>div>span{
  font-size: 12px;
  margin-right: 10px;
}
.email-inbox-header{
  font-size: 14px;
}

</style>
